{% extends 'base.html' %}

{% load static %}

{% block title %}
{{ teacher.me.first_name }}
{% endblock %}

{% block css %}
{{ block.super }}
<link rel="stylesheet" type="text/css" href="{% static 'css/teacher.css' %}">
{% endblock %}

{% block navsection %}
{{ block.super }}
{% verbatim vue %}
<ul class="tab tab-block" id="teacher-detail-tabs">
  <li class="tab-item" v-for="(index, tab) in tabs" v-bind:class="{active : current == index}">
    <a href="#" v-on:click="clickTabs(index)">{{ tab }}</a>
  </li>
</ul>
{% endverbatim vue %}
{% endblock navsection %}

{% block content %}
<div class="container">
	<div class="columns">
		<div class="column col-6 col-lg-8 col-md-10 col-sm-12 col-lg-auto col-md-auto col-sm-auto col-mx-auto">
<div id="student_list" v-show="show">
	<a class="btn btn-primary mb-2" href="/teacher/add-student?teacher_id={{teacher.pk}}">添加学生</a>

	{% for student in teacher.students.all %}
	{% include 'student-block.html' with actions='comment,delete' teacher=teacher %}
	{% endfor %}

	{% include 'student-add-comment.html' with textbooks=textbooks %}

	{% verbatim vue %}
	<div id="delete_student_modal" class="modal modal-sm" v-bind:class="{active:delete_student_modal_show}">
		<div class="modal-overlay"></div>
		<div class="modal-container">
			<div class="modal-header">
				<p class="modal-title h5">删除</p></div>
			<div class="modal-body">
				<div class="content">
					确定要删除该学生吗？
				</div>
			</div>
			<div class="modal-footer">
				<button class="btn btn-primary" v-on:click="deleteStudent(false)">取消</button>
				<button class="btn btn-default" v-on:click="deleteStudent(true)">确定</button>
			</div>
		</div>
	</div>
	{% endverbatim vue %}
</div>

<div id="class_table" v-show="show">
	<a class="btn btn-primary" href="/teacher/add-class?teacher_id={{teacher.pk}}">添加课程</a>
	
	{% verbatim vue %}
	<table class="table table-striped table-hover" id="course">
      <thead>
        <th>时间</th>
        <th v-for="weekday in weekdays">{{weekday}}</th>
      </thead>
      <tbody>
        <tr v-for="(tindex, time) in times">
          <td class="time"><time>{{ time > 12 ? time - 12 : time }}</time><sub>{{ time <= 12 ? 'a.m.' : 'p.m.' }}</sub></td>
          <td v-for="(windex, weekday) in weekdays" style="padding:0;">
          	<span v-for="(cindex, course) in formated_courses[windex][tindex]" v-on:click="clickStudent(windex, tindex, cindex)" class="course" 
	          	style="background-color: {{ colors[windex] }}; 
	          	top: {{ course['top'] }}px; 
	          	height: {{ course['height'] }}px; 
	          	line-height: {{ course['height'] }}px;">
	          	{{ course['fields']['name'] }}
	          </span>
          </td>
        </tr>
      </tbody>
    </table>

    <div id="student_info_modal" class="modal modal-sm" v-bind:class="{active:student_info_modal_show}">
		<div class="modal-overlay"></div>
		<div class="modal-container col-5 col-sm-12">
			<div class="modal-header">
				<p class="modal-title h5">{{ student_info_modal_class.fields.name }}</p></div>
			<div class="modal-body">
				<div class="content">
					<div class="form-group">
						<select class="form-select" v-model="class_weekday" v-bind:disabled="weekday_disabled">
							<option v-for="(index, weekday) in weekdays" value="{{index}}" v-bind:selected="index == student_info_modal_class.fields.weekday">{{ weekday }}</option>
						</select>
					</div>
					<div class="form-group">
						<label class="form-label">开始时间</label>
						<input class="form-input" v-model="class_begin_time" v-bind:disabled="begin_disabled" value="{{ student_info_modal_class.fields.begin }}">
					</div>
					<div class="form-group">
						<label class="form-label">课时</label>
						<div class="input-group">
							<input class="form-input" v-model="class_duration" v-bind:disabled="duration_disabled" value="{{ student_info_modal_class.fields.duration * 60 }}">
							<span class="input-group-addon">分</span>
						</div>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button class="btn btn-primary" v-on:click="complete(student_info_modal_class.pk)">完成</button>
				<button class="btn btn-default" v-on:click="editClass()">{{ delete_show ? "取消编辑" : "编辑" }}</button>
				<button class="btn btn-default" v-show="delete_show" v-on:click="deleteClass(student_info_modal_class.pk)">{{ !delete_pending ? '删除' : '确认删除' }}</button>
			</div>
		</div>
	</div>
    {% endverbatim vue %}
</div>

<i class="icon icon-upward" id="cursor"></i>
		</div>
	</div>
</div>
{% endblock %}

{% block javascript %}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" crossorigin="anonymous"></script>
<script type="text/javascript" src="{% static 'js/js.cookie.js' %}"></script>
<script type="text/javascript" src="{% static 'js/teacher.js' %}"></script>
 <script type="text/javascript">
navbar.$set('brand', '{{ teacher.me.first_name }}')
navbar.$set('brand_url', '/accounts/profile?teacher_id={{ teacher.pk }}')
</script>
{% endblock %}